<script setup lang="ts">

import router from "@/router";
import {ref} from 'vue'
import type {TabsPaneContext} from 'element-plus'
import {PhoneFilled} from "@element-plus/icons-vue";
import {getMinePre} from "@/api/home/index";
import {dayjs} from "element-plus";

const activeName = ref('first')

const handleClick = (tab: TabsPaneContext, event: Event) => {
    console.log(tab, event)
}
let data = ref([])
let dataShow = ref<boolean>(true)
let waitData = ref([])
let waitShow = ref<boolean>(true)
let progressData = ref([])
let progressShow = ref<boolean>(true)
let doneData = ref([])
let doneShow = ref<boolean>(true)
getMinePre().then((item) => {
    console.log(item)
    if (item.code === 200) {
        data.value = item.rows
        console.log(data.value)
        waitData.value = item.rows.filter((value) => {
            // console.log(value)
            if (value.status === "0") {
                return value
            }
        })
        progressData.value = item.rows.filter((value) => {
            // console.log(value)
            if (value.status === "1") {
                return value
            }
        })
        doneData.value = item.rows.filter((value) => {
            // console.log(value)
            if (value.status === "2" || value.status === "3" || value.status === "4") {
                return value
            }
        })
        if (data.value.length == 0) {
            dataShow.value = false
        } else if (waitData.value.length == 0) {
            waitShow.value = false
        } else if (progressData.value.length == 0) {
            progressShow.value = false
        } else if (doneData.value.length == 0) {
            doneShow.value = false
        }
    }
})
</script>

<template>
  <!--我的预约页面-->
    <div class="box">
        <div class="titleBox">
            <div class="titBoxImg">
                <img src="@/assets/images/我的预约.png" alt="" class="titImg">
            </div>
        </div>
        <div class="substance">
            <div class="titTime">
                <router-link to="/personal"><van-icon name="arrow-left"/></router-link>
                <span class="titleText">我的预约</span>
            </div>
            <div class="classify">
                <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick" stretch="true">
                    <el-tab-pane label="全部" name="first">
                        <div v-if="dataShow">
                            <div class="detailBox" v-for="item in data" :key="item.id">
                                <router-link :to="{path:'/waitBegin',query:{treeId:item.id}}">
                                    <div class="detailTitle">
                                        <div class="title">
                                            <el-icon color="#1590FB" style="vertical-align: bottom; margin: 2% 0">
                                                <PhoneFilled/>
                                            </el-icon>
                                            <span style="line-height: 2vw">{{ item.mode }}</span>
                                        </div>
                                        <div class="state" v-if="item.status === '0'"
                                             style="background-color: #F7F7B5;color: #D9BA31;">
                                            待开始
                                        </div>
                                        <div class="state" v-if="item.status === '1'"
                                             style="background-color: #CEE8FF;color: #1896FF;">
                                            进行中
                                        </div>
                                        <div class="state" v-if="item.status === '2'"
                                             style="background-color: #F2F3F4;color: #D3CBCB;">
                                            已完成
                                        </div>
                                        <div class="state" v-if="item.status === '3'"
                                             style="background-color: #F2F3F4;color: #D3CBCB;">
                                            已取消
                                        </div>
                                        <div class="state" v-if="item.status === '4'"
                                             style="background-color: #F2F3F4;color: #D3CBCB;width: 35%;">
                                            已取消
                                        </div>
                                    </div>
                                    <div class="timeBox">
                                        <div class="startTime">
                                            <div class="starDate">
                                                {{ dayjs(item.psyScheduling.date).format("MM-DD") }}
                                            </div>
                                            <div class="time">
                                                {{ item.psyScheduling.startTime }}
                                            </div>
                                            <div class="text">
                                                开始时间
                                            </div>
                                        </div>
                                        <div class="duration">
                                            ——
                                            <div class="time">
                                                {{ item.duration + "分钟" }}
                                            </div>
                                            ——
                                        </div>
                                        <div class="endTime">
                                            <div class="starDate">
                                                {{ dayjs(item.psyScheduling.date).format("MM-DD") }}
                                            </div>
                                            <div class="time">
                                                {{ item.psyScheduling.endTime }}
                                            </div>
                                            <div class="text">
                                                结束时间
                                            </div>
                                        </div>
                                    </div>
                                    <div class="teacher">
                                        <div class="imgBox">
                                            <img :src="'http://192.168.5.120:8090'+item.psyTeacher.avatar" alt="" class="imgT">
                                        </div>
                                        <div class="nameText">
                                            <div class="nameT">
                                                <span class="name">{{ item.psyTeacher.name }}</span> | <span
                                                    class="number">{{
                                                item.psyTeacher.count
                                                }}人咨询过</span>
                                            </div>
                                            <div class="introduce">
                                                {{ item.psyTeacher.profession }}
                                            </div>
                                        </div>
                                    </div>
                                </router-link>
                            </div>
                        </div>
                        <a-empty class="notDate" description="没有预约数据"
                                 image="../../src/assets/images/无数据.png" v-else/>
                    </el-tab-pane>
                    <el-tab-pane label="待开始" name="second">
                        <div v-if="waitShow">
                            <div class="detailBox" v-for="item in waitData" :key="item.id">
                                <router-link :to="{path:'/waitBegin',query:{treeId:item.id}}">
                                    <div class="detailTitle">
                                        <div class="title">
                                            <el-icon color="#1590FB" style="vertical-align: bottom; margin: 2% 0">
                                                <PhoneFilled/>
                                            </el-icon>
                                            <span style="line-height: 2vw">{{ item.mode }}</span>
                                        </div>
                                        <div class="state" v-if="item.status === '0'"
                                             style="background-color: #F7F7B5;color: #D9BA31;">
                                            待开始
                                        </div>
                                    </div>
                                    <div class="timeBox">
                                        <div class="startTime">
                                            <div class="starDate">
                                                {{ dayjs(item.psyScheduling.date).format("MM-DD") }}
                                            </div>
                                            <div class="time">
                                                {{ item.psyScheduling.startTime }}
                                            </div>
                                            <div class="text">
                                                开始时间
                                            </div>
                                        </div>
                                        <div class="duration">
                                            ——
                                            <div class="time">
                                                {{ item.duration + "分钟" }}
                                            </div>
                                            ——
                                        </div>
                                        <div class="endTime">
                                            <div class="starDate">
                                                {{ dayjs(item.psyScheduling.date).format("MM-DD") }}
                                            </div>
                                            <div class="time">
                                                {{ item.psyScheduling.endTime }}
                                            </div>
                                            <div class="text">
                                                结束时间
                                            </div>
                                        </div>
                                    </div>
                                    <div class="teacher">
                                        <div class="imgBox">
                                            <img :src="'http://192.168.5.120:8090'+item.psyTeacher.avatar" alt="" class="imgT">
                                        </div>
                                        <div class="nameText">
                                            <div class="nameT">
                                                <span class="name">{{ item.psyTeacher.name }}</span> | <span
                                                    class="number">{{
                                                item.psyTeacher.count
                                                }}人咨询过</span>
                                            </div>
                                            <div class="introduce">
                                                {{ item.psyTeacher.profession }}
                                            </div>
                                        </div>
                                    </div>
                                </router-link>
                            </div>
                        </div>
                        <a-empty class="notDate" description="没有待开始的预约"
                                 image="../../src/assets/images/无数据.png" v-else/>
                    </el-tab-pane>
                    <el-tab-pane label="进行中" name="third">
                        <div v-if="progressShow">
                            <div class="detailBox" v-for="item in progressData" :key="item.id">
                                <router-link :to="{path:'/waitBegin',query:{treeId:item.id}}">
                                    <div class="detailTitle">
                                        <div class="title">
                                            <el-icon color="#1590FB" style="vertical-align: bottom; margin: 2% 0">
                                                <PhoneFilled/>
                                            </el-icon>
                                            <span style="line-height: 2vw">{{ item.mode }}</span>
                                        </div>
                                        <div class="state" v-if="item.status === '1'"
                                             style="background-color: #CEE8FF;color: #1896FF;">
                                            进行中
                                        </div>
                                    </div>
                                    <div class="timeBox">
                                        <div class="startTime">
                                            <div class="starDate">
                                                {{ dayjs(item.psyScheduling.date).format("MM-DD") }}
                                            </div>
                                            <div class="time">
                                                {{ item.psyScheduling.startTime }}
                                            </div>
                                            <div class="text">
                                                开始时间
                                            </div>
                                        </div>
                                        <div class="duration">
                                            ——
                                            <div class="time">
                                                {{ item.duration + "分钟" }}
                                            </div>
                                            ——
                                        </div>
                                        <div class="endTime">
                                            <div class="starDate">
                                                {{ dayjs(item.psyScheduling.date).format("MM-DD") }}
                                            </div>
                                            <div class="time">
                                                {{ item.psyScheduling.endTime }}
                                            </div>
                                            <div class="text">
                                                结束时间
                                            </div>
                                        </div>
                                    </div>
                                    <div class="teacher">
                                        <div class="imgBox">
                                            <img :src="'http://192.168.5.120:8090'+item.psyTeacher.avatar" alt="" class="imgT">
                                        </div>
                                        <div class="nameText">
                                            <div class="nameT">
                                                <span class="name">{{ item.psyTeacher.name }}</span> | <span
                                                    class="number">{{
                                                item.psyTeacher.count
                                                }}人咨询过</span>
                                            </div>
                                            <div class="introduce">
                                                {{ item.psyTeacher.profession }}
                                            </div>
                                        </div>
                                    </div>
                                </router-link>
                            </div>
                        </div>
                        <a-empty class="notDate" description="没有在进行中的预约"
                                 image="../../src/assets/images/无数据.png" v-else/>
                    </el-tab-pane>
                    <el-tab-pane label="已结算" name="fourth">
                        <div v-if="doneShow">
                            <div class="detailBox" v-for="item in doneData" :key="item.id">
                                <router-link :to="{path:'/waitBegin',query:{treeId:item.id}}">
                                    <div class="detailTitle">
                                        <div class="title">
                                            <el-icon color="#1590FB" style="vertical-align: bottom; margin: 2% 0">
                                                <PhoneFilled/>
                                            </el-icon>
                                            <span style="line-height: 2vw">{{ item.mode }}</span>
                                        </div>
                                        <div class="state" v-if="item.status === '2'"
                                             style="background-color: #F2F3F4;color: #D3CBCB;">
                                            已完成
                                        </div>
                                        <div class="state" v-if="item.status === '3'"
                                             style="background-color: #F2F3F4;color: #D3CBCB;">
                                            已取消
                                        </div>
                                        <div class="state" v-if="item.status === '4'"
                                             style="background-color: #F2F3F4;color: #D3CBCB;width: 35%;">
                                            已取消
                                        </div>
                                    </div>
                                    <div class="timeBox">
                                        <div class="startTime">
                                            <div class="starDate">
                                                {{ dayjs(item.psyScheduling.date).format("MM-DD") }}
                                            </div>
                                            <div class="time">
                                                {{ item.psyScheduling.startTime }}
                                            </div>
                                            <div class="text">
                                                开始时间
                                            </div>
                                        </div>
                                        <div class="duration">
                                            ——
                                            <div class="time">
                                                {{ item.duration + "分钟" }}
                                            </div>
                                            ——
                                        </div>
                                        <div class="endTime">
                                            <div class="starDate">
                                                {{ dayjs(item.psyScheduling.date).format("MM-DD") }}
                                            </div>
                                            <div class="time">
                                                {{ item.psyScheduling.endTime }}
                                            </div>
                                            <div class="text">
                                                结束时间
                                            </div>
                                        </div>
                                    </div>
                                    <div class="teacher">
                                        <div class="imgBox">
                                            <img :src="'http://192.168.5.120:8090'+item.psyTeacher.avatar" alt="" class="imgT">
                                        </div>
                                        <div class="nameText">
                                            <div class="nameT">
                                                <span class="name">{{ item.psyTeacher.name }}</span> | <span
                                                    class="number">{{
                                                item.psyTeacher.count
                                                }}人咨询过</span>
                                            </div>
                                            <div class="introduce">
                                                {{ item.psyTeacher.profession }}
                                            </div>
                                        </div>
                                    </div>
                                </router-link>
                            </div>
                        </div>
                        <a-empty class="notDate" description="没有已结束的预约"
                                 image="../../src/assets/images/无数据.png" v-else/>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </div>
    </div>
</template>

<style scoped lass>
* {
    margin: 0;
    padding: 0;
}

.box {
    width: 100%;
    min-height: 210vw;

    .titBoxImg {
        width: 100%;
        height: 100%;

        .titImg {
            width: 100%;
            height: 100%;
        }
    }

    .titTime {
        margin-bottom: 5%;
        font-size: 5vw;
    }

    .substance {
        position: relative;
        margin: -10% auto;
        padding: 8% 6%;
        width: 90%;
        min-height: 350px;
        background-color: #fafafa;
        border-radius: 15px;

        .titTime {
            margin-bottom: 5%;
            font-size: 5vw;
        }
    }

    .detailBox {
        margin-bottom: 10px;
        padding: 5% 5%;
        width: 100%;
        height: 100%;
        min-height: 35vw;
        background-color: #fff;
        border-radius: 15px;

        .detailTitle {
            display: flex;
            justify-content: space-between;
            color: #000000;
        }

        .state {
            padding-top: 1.5%;
            width: 25%;
            min-height: 6vw;
            text-align: center;
            font-size: 90%;
            border-bottom-left-radius: 15px;
            border-top-left-radius: 15px;
        }

        .timeBox {
            margin-top: 5%;
            display: flex;
            justify-content: space-around;
            align-items: center;
            padding: 0 3% 4% 3%;
            border-bottom: 1px solid rgba(23, 15, 26, 0.2);

            .startTime,
            .endTime {
                display: flex;
                flex-direction: column;
                align-items: center;
                color: #000000;

                .time {
                    font-size: 5vw;
                }

                .text {
                    color: #8c939d;
                }
            }

            .duration {
                display: flex;
                color: #000000;

                .time {
                    padding: 3% 4%;
                    min-width: 14vw;
                    background-color: rgba(24, 35, 35, 0.1);
                    text-align: center;
                    font-size: 3vw;
                    border-radius: 15px;
                    color: #000000;
                }
            }
        }

        .teacher {
            display: flex;
            margin-top: 5%;
            width: 100%;
            height: 100%;

            .imgBox {

                width: 15%;
                height: 15%;
                .imgT {
                    width: 90%;
                    height: 90%;
                    border-radius: 50%;
                }
            }

            .nameText {
                margin-left: 2%;
                font-size: 3.6vw;
                color: #737577;

                .nameT {
                    .name {
                    //padding-top: 5px; //display: inline-block; //width: 50px; //height: 20px; color: black; font-size: 4vw; overflow: hidden;
                    }

                    .number {
                    //display: inline-block;
                    }
                }

                .introduce {
                    width: 88%;
                    /* 强制在同一行显示 */
                    white-space: nowrap;
                    /* 溢出隐藏 */
                    overflow: hidden;
                    /* 添加省略号 */
                    text-overflow: ellipsis;
                }
            }
        }
    }

    .notDate{
        margin-bottom: 10px;
        padding: 5% 0% 5% 5%;
        width: 100%;
        min-height: 40vw;
        background-color: #fff;
        border-radius: 15px;
    }
}

.demo-tabs > .el-tabs__content {
    padding: 10%;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
}

>>> .el-tabs__content {
    padding: 0 3%;
}
</style>